<%@ page import="com.yz.service.ProductService" %>
<%@ page import="java.util.List" %>
<%@ page import="com.yz.entity.Product" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%--
  Created by IntelliJ IDEA.
  User: yz168
  Date: 2021/8/24
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>产品管理</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
</head>
<style>
    body table{
        text-align: center;
    }
    button a {
        text-decoration: none;
        color: black;
    }
    button a:hover{
        color: black;
    }
</style>
<script>
    function selectAll() {
        var all = document.getElementById("checkAll").checked;
        var arg = document.getElementsByName("element");
        for (var i = 0; i < arg.length; i++) {
            arg[i].checked = all;
        }
    }
    function isAll() {
        var all = document.getElementById("checkAll");
        var arg = document.getElementsByName("element");
        var count = 0;
        for (var i = 0; i < arg.length; i++) {
            if (arg[i].checked){
                count++;
            }
        }
        if (count == arg.length){
            all.checked = true;
        }else {
            all.checked = false;
        }
    }

</script>
<body>
    <form name="formStyle" id="formStyle" method="post">
        <table class="table table-bordered table-hover">
            <tr>
                <th style="text-align: center"><input id="checkAll" type="checkbox" onclick="selectAll()"/>全选</th>
                <th style="text-align: center">商品号</th>
                <th style="text-align: center">商品名称</th>
                <th style="text-align: center">进货价格</th>
                <th style="text-align: center">商品数量</th>
                <th style="text-align: center">供应商号</th>
                <th style="text-align: center">供应商名称</th>
                <th style="text-align: center">销售价格</th>
                <th style="text-align: center">分类号</th>
                <th style="text-align: center">分类名称</th>
                <th style="text-align: center">进货时间</th>
                <th style="text-align: center">操作</th>
            </tr>
            <c:forEach items="${products}" var="product">
                <tr>
                    <td><input name="element" type="checkbox" value="${product.productId}" onclick="isAll()"/></td>
                    <td>${product.productId}</td>
                    <td>${product.productName}</td>
                    <td>${product.incomePrice}</td>
                    <td>${product.quantity}</td>
                    <td>${product.providerId}</td>
                    <td>${product.provider.providerName}</td>
                    <td>${product.salesPrice}</td>
                    <td>${product.categoryId}</td>
                    <td>${product.categorys.categoryName}</td>
                    <td>${product.incomeTime}</td>
                    <td>
                        <a class="glyphicon glyphicon-pencil" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"
                           href="${pageContext.request.contextPath}/toEditProduct.action?productId=${product.productId}"></a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a class="glyphicon glyphicon-trash" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1"
                           href="${pageContext.request.contextPath}/doDelProduct.action?productId=${product.productId}"></a>
                    </td>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="12" class="lastRow">
                    <button class="btn btn-default"><a href="${pageContext.request.contextPath}/productList.action?pageIndex=1">首页</a></button>
                    <c:choose>
                        <c:when test="${pageIndex==1}">
                            <button class="btn btn-default"><a href="#">上一页</a></button>
                        </c:when>
                        <c:otherwise>
                            <button class="btn btn-default"><a href="${pageContext.request.contextPath}/productList.action?pageIndex=${pageIndex-1}">上一页</a></button>
                        </c:otherwise>
                    </c:choose>
                    总共${total}条记录 当前第:${pageIndex}页
                    <c:choose>
                        <c:when test="${pageIndex==pages}">
                            <button class="btn btn-default"><a href="#">下一页</a></button>
                        </c:when>
                        <c:otherwise>
                            <button class="btn btn-default"><a href="${pageContext.request.contextPath}/productList.action?pageIndex=${pageIndex+1}">下一页</a></button>
                        </c:otherwise>
                    </c:choose>
                    <button class="btn btn-default"><a href="${pageContext.request.contextPath}/productList.action?pageIndex=${pages}">末页</a></button>
                </td>
            </tr>
        </table>

        <%--修改产品模态框--%>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                </div>
            </div>
        </div>

        <%--删除产品模态框--%>
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                </div>
            </div>
        </div>

    </form>


</body>
</html>
